// import * as d3 from "../lib/d3.js";
import * as d3 from "d3";
import {
  createModel
} from "./model.js";
import {
  ø
} from "../util/objects.js";
// import {mapObject} from "../lib/underscore.js";
import {
  mapObject
} from "underscore";
import {
  isMobile
} from "../util/context.js";
import {
  localStash
} from "../util/stash.js";
import {
  $
} from "../util/seq.js";

const urls = {
  "earth-topo.json": "./earth-topo.c87af6.json",
  "earth-topo-mobile.json": "./earth-topo-mobile.cddf5b.json"
};

const topologyURL = isMobile() ? urls["earth-topo-mobile.json"] : urls["earth-topo.json"];
// const initialShowCta = d3.select(".cta-bar").property("hidden") !== true;

export function initialSessionState() {
  return ø({
    display_timezone: "device",
    topology_url: topologyURL,
    interpolation_type: "bilinear",
    hd_enabled: false,
    show_menu: false,
    status: undefined,
    error: undefined,
    progress: undefined,
    notice: undefined,
    // show_cta: initialShowCta,
    show_cta: false,
    colorbar_cursor: undefined, // [0, 100] percentage from left edge of colorbar
    selected_units: undefined, // maps layer names to unit symbols ({"wind": "m/s"}), or undefined
    font_size: localStash.get("settings.font_size") ?? "medium",
  });
}

/**
 * @type {Model}
 */
export const sessionStore = createModel(mapObject(initialSessionState(), () => undefined));

// Persist some session values to localStorage
sessionStore.on($`change:font_size`, val => localStash.put("settings.font_size", val ?? null));

export function restoreSessionStore() {
  sessionStore.save(initialSessionState());
}
